html,
body {
    padding-bottom: .5rem;
    height: 100%;
}

// 头部搜索
header {
    width: 100%;
    background-color: #fff;
    height: .44rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px .1rem;

    .head-input {
        width: 100%;
        height: .3rem;
        background-color: #f5f5f5;
        color: #949494;
        border-radius: .3rem;
        overflow: hidden;
        display: flex;
        align-items: center;
    }

    .iconfont {
        font-size: .16rem;
        padding: 0 .1rem;
    }

    input {
        flex: 1;
        height: .3rem;
        background-color: #f5f5f5;
        font-size: .16rem;
    }
}


// 分类
main {
    height: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: .01rem;

    .left {
        width: .93rem;

        .nav {
            width: 100%;
            height: .44rem;
            line-height: .44rem;
            padding: 0 .18rem;
            font-size: .14rem;
        }

        .nav-this {
            background-color: #fff;
            position: relative;

            &::after {
                content: '';
                width: .03rem;
                height: .18rem;
                background-color: red;
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
            }
        }

    }

    .right {
        flex: 1;
        height: 100%;
        background-color: #fff;
        overflow: auto;

        .nav-main {
            margin-top: .18rem;
            padding: 0 .15rem;
            background-color: #fff;

            .title {
                padding: 0.05rem;

                h2 {
                    font-size: .14rem;
                    font-weight: 300;
                }
            }

            .list {
                display: flex;
                flex-wrap: wrap;
                .item {
                    width: .66rem;
                    margin-right: .2rem;

                    &:nth-child(3n){
                        margin-right: 0;
                    }

                    .pic {
                        width: .66rem;
                        height: .66rem;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .tit {
                        width: 100%;
                        text-align: center;
                        font-size: .12rem;
                        line-height: .3rem;
                    }
                }

            }

        }
    }
}